<template>

    <div class="panel-style">
        <!--<div class="align-r pad-r-30 pad-b-20 mar-r-10">
            <el-date-picker
                    v-model="chartPickerOne"
                    type="daterange"
                    size="small"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
            <el-button type="primary" class="mar-l-10" size="mini">筛选</el-button>
        </div>-->

        <line-chart :chart-data="lineDataOne" :chart-type="lineTypeOne" :chart-x="lineXOne"></line-chart>

    </div>

    <!--<div class="panel-style">
         <div class="align-r pad-r-30 pad-b-20 mar-r-10">
           <el-date-picker
             v-model="chartPickerOne"
             type="daterange"
             size="small"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"></el-date-picker>
           <el-button type="primary" class="mar-l-10" size="mini">筛选</el-button>
         </div>
         <line-chart :chart-data="lineDataOne" :chart-type="lineTypeOne" :chart-x="lineXOne"></line-chart>
       </div>-->

</template>

<style lang="scss" scoped>

    .bar-show{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        padding: 20px 0px 20px 20px;
    }
    .number-panel{
        height: 204px;
        padding-top: 40px;
    }
    .number-orange{
        color: #fe980f;
    }
    .bar-icon{
        font-size: 42px!important;
        &.one-icon{
            font-size: 50px!important;
        }
        &.two-icon{
            font-size: 46px!important;
        }
        &.three-icon{
            font-size: 65px!important;
        }
    }
    .user-avatar {
        width: 46px;
        height: 46px;
        display: block;
        border-radius: 50px;
    }
    .panel-box{
        h2{
            margin: 0;
            padding: 0;
        }
        .more-btn{
            cursor: pointer;
            color: #36a3f7;
        }
    }
    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
    .panel-style {
        background: #fff;
        padding: 16px 0px 0 20px;
        margin-bottom: 32px;
        &.panel-box{
            padding: 16px 20px 0 20px;
        }
    }

</style>
<script>
  import { statOrderSell } from '@/api/goods/goods-statistics'
  import LineChart from '@/components/Charts/LineChart'

  const lineOne = {
    data: {
      oneData: []
    }
  }

  export default {
    components: {
      LineChart
    },
    data() {
      return {
        lineDataOne: lineOne.data,
        lineTypeOne: ['商品销售数', '分销微客数'],
        lineXOne: [],
        listLoading: false
      }
    },
    // 初始化页面
    created() {
      this.initData()
    },
    methods: {
      initData() {
        const enterpriseId = this.getEnterpriseId()
        const data = {
          enterpriseId: enterpriseId
        }
        statOrderSell(data).then(response => {
          this.lineXOne = response.data.x
          var data = {
            oneData: response.data.oneData,
            twoData: response.data.twoData
          }
          this.lineDataOne = data
        })
      }
    }
  }
</script>
